﻿<html>
  <head>
    <meta charset="utf-8">
    <title>整合版</title>
    <link rel="stylesheet" href="aggrolist.css">
	<link rel="stylesheet" href="enmity.css">
	<link rel="stylesheet" href="multi.css">
  </head>

  <body id="multi" v-class="resize-handle: !locked">
	<div class="outer">
		<div class="inner">
		<div class="background"></div>
		<div class="header-func">
			<a class="btn-exchange" v-on="click:exchange"><i class="fa-exchange {{isAutoExchange ? 'fa-exchangeoff' : ''}}"></i></a>
			<a class="btn-blur" v-on="click:blur"><i class="fa-blur {{isBlur ? 'fa-bluroff' : ''}}"></i></a>
			<a class="btn-auto-exchange" v-on="click:autoExchange"><i class="fa-auto-exchange {{!isAutoExchange ? 'fa-auto-exchangeoff' : ''}}"></i></a>
			<h4 class="blue {{current == 'aggrolist' ? 'hide' : ''}}">目标仇恨</h4>
			<h4 class="blue {{current == 'enmity' ? 'hide' : ''}}">仇恨列表</h4>
		</div>
			<div id="aggrolist" class="{{isHide ? 'hide' : ''}}">
				<div v-if="!updated" class="gold"><span>无数据传入.</span></div>
				<div v-if="updated">
					<table id="combatants" v-show="!collapsed">
					  <thead class="gold">
						<tr>
						  <th class="text-left">仇恨</th>
						  <th class="text-left">&nbsp;目标</th>
						  <th class="text-right">血量%</th>
						  <th class="text-center" style="width: 5em">目标的目标</th>
						</tr>
					  </thead>
					 <tbody class="blue">
					 <template v-repeat="combatant: combatants">
					   <tr class="{{combatant.isCurrentTarget ? '' : ''}}">
						<td class="text-right" style="width: 4em"><div style="margin: 1px; padding-right: 1px" class="{{combatant.hatecolor}}">{{combatant.isCurrentTarget ? " ➸ " : "  "}}{{combatant.HateRate}}%</div></td>
						<td class="text-left" colspan="2">
						  <div class="box">
							<div class="content">{{combatant.Name}}<span style="float: right">{{combatant.HPPercent}}%</span>
							</div>
							<div class="gauge {{combatant.hpcolor}}" style="width: {{combatant.HPPercent}}%" />
						  </div>
						</td>
						<td class="text-center" style="width:80px;"><div style="padding:0 2px;" class="{{combatant.Target | jobrole}} {{isBlur && !combatant.Target.isMe ? 'nameblur' : ''}}">{{combatant.Target.isMe ? "YOU" : combatant.Target.Name}}</div></td>
					  </tr>
					  </template>
					</tbody>
				  </table>
				</div>
			</div>
			<div id="enmity" class="{{isHide ? 'hide' : ''}}">
				<div v-if="!updated" class="gold"><span>无数据传入.</span></div>
				<div v-if="updated">
				  <div id="target">
					<div class="box">
					  <div class="gauge {{target | hpcolor}}" style="width: {{target.HPPercent}}%"></div>
						<div class="name">
						  <span class="header">目标: </span>
						  <span class="value">{{target.Name}}</span>
						</div>
					  </div>
					  <div>
						<span class="header">血量: </span>
						<span class="value">{{target.HPPercent}}% ({{target.CurrentHP}}/{{target.MaxHP}})</span>
						<div style="float: right">
						  <span class="header">距离: </span>
						  <span class="value">{{target.Distance}}米 ({{target.EffectiveDistance}}米)</span>
						</div>
					  </div>
					</div>
				  </div>
				<div id="entries">
					<div class="box" v-repeat="e: entries">
					  <div class="content"><span class="name {{e.isMe ? 'me' : '' }}" style="background-color:transparent;">{{$index + 1}}.<span class="{{isBlur && !e.isMe ? 'nameblur' : ''}}">{{e | you}}</span></span><span class="enmity">{{e.EnmityString}}</span></div>
					  <div class="gauge {{e | jobclass}}" style="width: {{e.HateRate}}%" />
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="vue.min.js"></script>
    <script src="aggrolist.js"></script>
	<script src="enmity.js"></script>
	<script type="text/javascript">
		aggrolist.$set("isHide", false)
		enmity.$set("isHide", true)
		
		var multi = new Vue({
			el: '#multi',
			data: {
				current: "aggrolist",
				isBlur: false,
				isAutoExchange: true,
			},
			attached: function() {
				document.addEventListener('onOverlayDataUpdate', this.update);
			},
			detached: function() {
				document.removeEventListener('onOverlayDataUpdate', this.update);
			},
			methods: {
				exchange: function(e) {
					if (e != undefined && this.isAutoExchange) {
						return
					}
					if (this.current == "aggrolist") {
						this.current = 'enmity'
						aggrolist.$set("isHide", true)
						enmity.$set("isHide", false)
					} else {
						this.current = 'aggrolist'
						aggrolist.$set("isHide", false)
						enmity.$set("isHide", true)
					}
				},
				blur: function(e) {
					this.isBlur = !this.isBlur
					aggrolist.$set("isBlur", this.isBlur)
					enmity.$set("isBlur",  this.isBlur)
				},
				autoExchange: function(e) {
					this.isAutoExchange = !this.isAutoExchange
				},
				update: function(e) {
					if(this.isAutoExchange) {
						if (this.current == "aggrolist") {
							if (aggrolist.combatants.length == 1) {
								this.exchange()
							}
						} else {
							if (aggrolist.combatants.length > 1) {
								this.exchange()
							}
						}
					}
				}
			}
		});
	</script>
  </body>
</html>

